<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>map baidu</title>

    <style type="text/css">

        .bmap-container {
            width: 80%;
            height: 410px;
            border: 3px solid #d8d8d8;
            margin-top: 20px;
            margin-left: 20px;
        }

        div{
            margin-top: 20px;
        }
    </style>

    <script type="text/javascript" src="/static/xmenu/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=u6Klv6ue1txKAw3QTixzROMMxVid6NGe"></script>
</head>

<body>
    <div>
        <h2> 地图应用（获取经纬度）</h2>
    </div>

    <div style="padding-top: 10px">
        <form name="form_map">
            <div>
                <label> 详细地址</label>
                <div>
                    <div>
                        <input type="text" placeholder="详细地址" name="address"/>
                        <span><button type="button" id="btn_mapmarker"> 定位</button></span>
                    </div>
                </div>
            </div>
            <div style="width: 70%; border-top: 10px">
                <label></label>
                <div>
                    <input type="hidden" name="geoPoint"/>
                    <div id="ctn_bmap"  class="bmap-container" ></div>
                    <p class="help-block"> 请在地图上标注网点的位置</p>
                </div>
            </div>
        </form>
    </div>
</body>
<script  type="text/javascript">
    $(function(){

        var form_map = window.form_map;
        var  bmap_map;
        //初始化新增网点地图
        bmap_map = new BMap.Map("ctn_bmap", {enableMapClick: false});          // 创建地图实例
        bmap_map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        bmap_map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        bmap_map.centerAndZoom("北京", 13);
        bmap_map.addEventListener("click", function (e) {
            bmap_map.clearOverlays();
            bmap_map.addOverlay(new BMap.Marker(e.point));
            form_map.geoPoint.value = e.point.lat + "," + e.point.lng;
        });
        //绑定定位事件
        var bmap_local_map = new BMap.LocalSearch(bmap_map, {renderOptions: {map: bmap_map}});
        $("#btn_mapmarker").click(function () {
            bmap_local_map.search(form_map.address.value);
        });
    })
</script>
</html>
